<template>
  <el-card class="custom-card">
    <!-- 标题部分 -->
    <div class="title-section">
      <h1 class="chinese-title">新闻中心</h1>
      <h2 class="english-title">NEWS CENTER</h2>
      <el-divider class="title-divider" />
    </div>

    <!-- 新闻卡片列表 -->
    <div class="news-container">
      <div
          v-for="(news, index) in paginatedNews"
          :key="news.id"
          class="news-card"
          @click="goToNewsDetail(news.id)"
      >
        <div class="news-date">
          <div class="news-day">{{ formatDay(news.publish_time) }}</div>
          <div class="news-month-year">{{ formatMonthYear(news.publish_time) }}</div>
        </div>
        <div class="news-divider"></div>
        <div class="news-content">
          <div class="news-title">{{ news.title }}</div>
          <div class="news-summary">{{ truncateSummary(news.summary) }}</div>
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="newsStore.newsList.length"
          layout="prev, pager, next"
          background
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useNewsStore } from '~/stores/newsStore'

const router = useRouter()
const newsStore = useNewsStore()

// 分页相关
const currentPage = ref(1)
const pageSize = ref(5)

// 获取分页后的新闻数据
const paginatedNews = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return newsStore.newsList.slice(start, end)
})

// 日期格式化
const formatDay = (dateString: string) => {
  const date = new Date(dateString)
  return date.getDate().toString().padStart(2, '0')
}

const formatMonthYear = (dateString: string) => {
  const date = new Date(dateString)
  const month = date.getMonth() + 1
  const year = date.getFullYear()
  return `${year}-${month.toString().padStart(2, '0')}`
}

// 摘要截断
const truncateSummary = (summary: string) => {
  const maxLength = 100
  return summary.length > maxLength
      ? summary.substring(0, maxLength) + '...'
      : summary
}

// 跳转到新闻详情
const goToNewsDetail = (id: string) => {
  router.push({
    path: '/news/NewsDetail',
    query: { id: id }
  })
}

// 组件挂载时获取新闻数据
onMounted(() => {
  newsStore.fetchNews()
})
</script>

<style scoped>


/* 自定义卡片样式 */
.custom-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  max-width: 1200px;
  margin: 0 auto;
}

.custom-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 标题部分样式 */
.title-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 靠右对齐 */
  margin-bottom: 2rem;
}

.chinese-title {
  font-size: 40px;
  font-weight: bold;
  color: #13675b; /* 绿色 */
  margin-bottom: 1px;
}

.english-title {
  font-size: 20px;
  font-weight: bold;
  color: #13675b; /* 绿色 */
  margin-bottom: 1rem;
  letter-spacing: 1px; /* 英文字母间距 */
}

.title-divider {
  margin: 0;
  border-color: #13675b; /* 绿色分隔线 */
  width: 100%; /* 保持全宽 */
}

/* 新闻容器 */
.news-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

/* 新闻卡片样式 */
.news-card {
  display: flex;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.news-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.news-day {
  font-size: 24px;
  font-weight: bold;
  color: #13675b;
  padding-bottom: 3px;
}

.news-month-year {
  font-size: 12px;
  color: #13675b;
}

.news-divider {
  width: 1px;
  background-color: #e0e0e0;
  margin: 0 20px;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  color: #10594f;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.news-summary {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .custom-card {
    padding: 1.5rem;
  }

  .news-card {
    padding: 15px;
    flex-direction: column;
  }

  .news-date {
    flex-direction: row;
    gap: 10px;
    margin-bottom: 10px;
  }

  .news-divider {
    width: 100%;
    height: 1px;
    margin: 10px 0;
  }

  .news-day, .news-month-year {
    font-size: 16px;
  }
}
</style>